import React, { Component } from 'react'
import { Route, Redirect } from 'react-router-dom'
import { hasToken } from 'utils/storage'
import Login from 'pages/Login'

export default class AuthRoute extends Component {
  render() {
    // console.log(this.props)
    // 接收到的component属性改成利用render渲染
    const { component: Component, ...rest } = this.props // react组件的首字母应该是大写，故而重命名
    // console.log(Component) // 这就是Home组件
    // console.log('rest is', rest)

    return (
      <Route
        // ...rest -- rest属性，没给component属性
        {...rest}
        render={(props) => {
          // console.log('props is', props)
          // console.log('hasToken() is', hasToken())

          if (hasToken()) {
            return <Component {...props} />
          } else {
            return (
              <Redirect
                to={{
                  pathname: '/login',
                  state: {
                    from: props.location.pathname
                  }
                }}
              ></Redirect>
            )
          }
        }}
      ></Route>
    )
  }
}
